<template>
    <div class="components-container">
        <sweet-modal ref="dialog" class="dialog" :sweetModalMaxWidth="1200">
            <h3>收费项目选择</h3>
            <div style="display:flex;width:100%;height:700px;">
                <div style="width:20%;height:100%;padding-right:20px;">
                    <fieldset class="layui-elem-field layui-field-title scrollNone"
                        style="border:2px solid #ddd; border-radius:5px; width:100%; height:calc(100% - 50px); padding:10px;margin:0 20px 0 0;">
                        <el-menu :default-opened="'1'" class="el-menu-vertical-demo">
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-document"></i>
                                    <span>收费项目大类</span>
                                </template>
                                <el-menu-item @click="select" index="" v-text="'全部'"></el-menu-item>
                                <el-menu-item @click="select" :key="index" v-for="(item,index) in chargeMainData"
                                    :index="item.CYPID" v-text="item.CYPNAME"></el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </fieldset>
                </div>
                <div style="width: 80%;height:700px;">
                    <div style="width:100%;height:55%;">
                        <h3 style="float: left;">收费项目选择 </h3>  
                     <div style="float: right;" >
                        <el-button @click="makeSure()" size="mini" style="width:100%;" round
                            type="warning">确认选中收费项</el-button>
                    </div>
                        <el-form ref="form" inline label-position="left" :model="searchData" label-width="100px" style="clear:both">
                            <el-form-item class="form-item" label="收费项目名称">
                                <el-input size="mini" v-model="searchData.nameLike" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item class="form-btn" label-width="20px">
                                <el-button size="mini" round style="margin-left:20px;" class="search-btn" type="primary"
                                    @click="getAllCharge">搜索
                                </el-button>
                                <!-- <el-button class="search-btn" @click="btnRepeat">重置</el-button> -->
                            </el-form-item>
                        </el-form>
                        <el-table :data="chargeData" border :height="`calc(100% - 100px)`" style="width: 100%;"
                            @row-dblclick="dbclick">
                            <!-- <el-table-column label="业务类型" prop="THATYPNAME" align="center">
                            </el-table-column> -->
                            <el-table-column label="快速代码" prop="CHADM" align="center">
                            </el-table-column>
                            <el-table-column label="收费名称" prop="CHANAME" align="center">
                            </el-table-column>
                            <el-table-column label="现行标准" prop="CHAMONEY" align="center">
                            </el-table-column>
                            <el-table-column label="计量单位" prop="CHAAUNIT" align="center">
                            </el-table-column>
                            <!-- <el-table-column label="启用日期" prop="TPEEFFECTIVEDATE" align="center">
                            </el-table-column> -->
                            <!-- <el-table-column label="状态" prop="THASTATUS" align="center">
                            </el-table-column> -->
                        </el-table>
                    </div>
                    <div style="width:100%;height:40%;">
                        <h3 style="">收费项目选择</h3>
                        <el-table ref="table" :data="chooseChargeData" border :height="`calc(100% - 30px)`"
                            style="width: 100%;" @row-dblclick="deleteCharge">
                            <el-table-column  label="序号" align="center" type="index" width="50">
                            </el-table-column>
                            <el-table-column label="快速代码" prop="CHADM" align="center">
                            </el-table-column>
                            <el-table-column label="收费名称" prop="CHANAME" align="center">
                            </el-table-column>
                            <el-table-column label="现行标准" prop="CHAMONEY" align="center">
                            </el-table-column>
                            <el-table-column label="计量单位" prop="CHAAUNIT" align="center">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </sweet-modal>
    </div>
</template>
<style rel="stylesheet/scss" lang="scss">
@import "src/styles/common.scss";

div {
  cursor: pointer;
}
.scrollNone{
  overflow-y: scroll;
}
.scrollNone::-webkit-scrollbar{
	display: none;
}

</style>
<script>
import sweetModal from "@/components/sweetModal";
import apiBase from "@/api/apiBase.js";
import { accAdd } from "@/utils/operations.js";
import { formatDate, timeStringToDate } from "@/utils/date.js";
import { manage } from "@/mixins/managePage.js";
export default {
  name: "oldCemManageItemMain",
  mixins: [manage],
  props:{
    allCharge: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      chargeMainData: [],
      chargeData: [],
      chooseChargeData: [],
      chacypidEqual: null,
      searchData:{},
      chlList:[]
    };
  },
  //计算属性
  computed: {},
  methods: {
    select(e) {
      this.getAllCharge(e.index);
    },
    open(order,chlList) {
      this.chlList = chlList
      this.getAllCharge()
      switch (order) {
        case "选择收费项目":
          this.chooseChargeData = [];
          this.$refs.dialog.open();
          break;

        default:
          break;
      }
    },
    selectCharge(){
      this.chargeData = this.chargeData.filter(item => !this.chlList.some(ele=>ele.CHLCHAID===item.CHAID))
    },
    getAllCharge(val) {
      if (val) {
        this.chacypidEqual = val;
      } else {
        this.chacypidEqual = null;
      }
      apiBase.DoService(
        {
          Data: {
            chacypidEqual: this.chacypidEqual,
            nameLike:this.searchData.nameLike,
            chastatusEquals:'A'
          }
        },
        apiBase.getApiAdress().Checkout.GetAllCharge,
        res => {
          this.chargeData = res.data.content.OutData;
          this.selectCharge()
        }
      );
    },
    dbclick(row) {
      let bool = false
      this.chooseChargeData.forEach((item,index)=>{
        if(row.CHAID== item.CHAID){
          bool = true
        }
      })
      if(bool){
        return
      }
      this.chooseChargeData.push(row);
      this.$nextTick(() => {
        this.$refs.table.bodyWrapper.scrollTop = this.$refs.table.bodyWrapper.scrollHeight;
      });
    },
    // 删除
    deleteCharge(row) {
      this.chooseChargeData.forEach((item, index) => {
        if (item == row) {
          this.chooseChargeData.splice(index, 1);
        }
      });
    },
    // 确认选中
    makeSure() {
      if (this.chooseChargeData.length > 0) {
        this.$emit("makeSure", this.chooseChargeData);
        this.$refs.dialog.close();
      } else {
        this.$message({
          showClose: true,
          message: `请选中收费项目`,
          type: "warning"
        });
      }
    }
  },
  mounted() {},
  components: {
    sweetModal
  },
  created() {},
  activated() {
    apiBase.DoService({}, apiBase.getApiAdress().ChargeProject.QueryType, res => {
      this.chargeMainData = res.data.content;
      this.getAllCharge();
    });
  }
};
</script>
